<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>百度地图</title>
		<style type="text/css">
			html {
				height: 100%
			}

			body {
				height: 100%;
				margin: 0px;
				padding: 0px
			}

			#mapPage {
				height: 100%;
				z-index: 1;
			}

			.tangram-suggestion-main {
				position: absolute;
				z-index: 99999999999999;
			}

			#container {
				height: 100%
			}


			.neibu_box {
				width: 90%;
				height: 180px;
				background-color: #fff;
				border-radius: 1%;
				top: 5%;
				left: 5%;
				z-index: 9;
				position: absolute;
				padding-top: 10px;
				padding-bottom: 10px;
			}

			.neibuimg {
				width: 10%;
				height: 20%;
			}

			.neibu_flx {
				display: flex;
				padding: 3% 5%;
				align-items: center;
			}

			.neibu_box_input {
				border: none;
				margin-left: 5%;
				width: 75%;
			}

			.neibu_box_input:focus {
				outline: none;
				border: none;
			}

			.neibuicolse {
				width: 5%;
				height: 10%;
			}

			.btn {
				width: 90%;
				height: 45px;
				background-color: #02A7F0;
				text-align: center;
				line-height: 45px;
				color: #fff;
				border-radius: 5px;
				margin-left: 5%;
				margin-top: 5%;
			}
			.preference_item_box_zhuang {
				background-color: #019FE8;
				width: 28px;
				height: 28px;
				border-radius: 100%;
				color: #fff;
				text-align: center;
				line-height: 28px;
				font-size: 12px;
			}
			.preference_item_box_zhuang1 {
				background-color: #579AA3;
				width: 28px;
				height: 28px;
				border-radius: 100%;
				color: #fff;
				text-align: center;
				line-height: 28px;
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<div>

		</div>
		<div id='mapPage'>
			<div id='container'></div>
			<div class="neibu_box">
				<div class="neibu_flx">
					<div class="preference_item_box_zhuang">装</div>
					<input type="text" class="neibu_box_input" placeholder="从哪里装？" id="input">
					<!-- <img src="../carType/close.png" class="neibuicolse"> -->
				</div>
				<div class="neibu_line">
				</div>
				<div class="neibu_flx">
					<div class="preference_item_box_zhuang1">卸</div>
					<input type="text" class="neibu_box_input" placeholder="送到哪里去？" id="input1">
					<!-- <img src="../carType/close.png" class="neibuicolse"> -->
				</div>
				<div class="btn" id="btn">
					确定
				</div>
			</div>
			<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;
						 height:auto; display:none;"></div>
			<div id="searchResultPanel1" style="border:1px solid #C0C0C0;width:150px;
						 			 height:auto; display:none;"></div>
		</div>



	</body>
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
	<script type="text/javascript"
		src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=VeNlX17jPLxeiO4BzoL5rb1nyULo4LA9"></script>
	<script type="text/javascript">
		// obj.attr=2222
		document.addEventListener('UniAppJSBridgeReady', function() {
			var hair = {};
			var unloading = {}
			var inputShow = 0
			var select = "input"

			function G(id) {
				return document.getElementById(id);
			}
			var input = document.getElementById("input");
			var input1 = document.getElementById("input1");

			Object.defineProperty(hair, "attr", {
				configurable: true,
				enumerable: true,
				set: function(value) { //监听后台数据的改变
					attr = value;
					input.value = value; //将后台数据的值同步到输入框
					select = "input"
				},
				get: function() {
					return attr;
				}
			});
			input.onkeyup = function(e) { //监听输入框内容的变化
				hair.attr = this.value; //将输入框的值同步到后台数据
			};


			Object.defineProperty(unloading, "attr", {
				configurable: true,
				enumerable: true,
				set: function(value) { //监听后台数据的改变
					attr = value;
					input1.value = value; //将后台数据的值同步到输入框
					select = "input1"
				},
				get: function() {
					return attr;
				}
			});
			input1.onkeyup = function(e) { //监听输入框内容的变化
				unloading.attr = this.value; //将输入框的值同步到后台数据
			};

			// ------------------------------------  配置百度地图  --------------------------------------------------------------------------------
			var map = new BMapGL.Map("container"); // 创建地图实例
			var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标 
			map.centerAndZoom(point, 17); // 初始化地图，设置中心点坐标和地图级别
			map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
			var geoloca = new BMapGL.Geolocation();
			var transit = new BMapGL.DrivingRoute(map, {
				renderOptions: {
					map: map
				},
				onSearchComplete: searchComplete,

			});
			var searchComplete = function(results) {
				if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
					return;
				}
				var plan = results.getPlan(0);

				output = '剩余需要' + plan.getDistance(true) + '共' + plan.getDuration(true);
			}
			var ac
			var ac1
			var myValue;
			var myValue1;
			var poiWeidu = ''
			var poiWeidu1 = ''
			input.onfocus = function() {
				inputShow = 0
				ac = ''
				ac = new BMapGL.Autocomplete( //建立一个自动完成的对象
					{
						"input": 'input',
						"location": map
					});
				ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
					var str = "";
					var _value = e.fromitem.value;
					var value = "";
					if (e.fromitem.index > -1) {
						value = _value.province + _value.city + _value.district + _value.street + _value
							.business;
					}
					str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

					value = "";
					if (e.toitem.index > -1) {
						_value = e.toitem.value;
						value = _value.province + _value.city + _value.district + _value.street + _value
							.business;
					}
					str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
					G("searchResultPanel").innerHTML = str;
				});

				ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
					var _value = e.item.value;
					myValue = _value.province + _value.city + _value.district + _value.street + _value
						.business;
					G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index +
						"<br />myValue = " + myValue;

					input.value = myValue; //将后台数据的值同步到输入框
					ac = ''
					ac1 = ''
					searchByStationName("input")
					setPlace(myValue);
				});
			}



			input1.onfocus = function() {
				inputShow = 1
				ac = ''
				ac1 = new BMapGL.Autocomplete( //建立一个自动完成的对象
					{
						"input": 'input1',
						"location": map
					});
				ac1.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
					var str = "";
					var _value = e.fromitem.value;
					var value = "";
					if (e.fromitem.index > -1) {
						value = _value.province + _value.city + _value.district + _value.street + _value
							.business;
					}
					str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

					value = "";
					if (e.toitem.index > -1) {
						_value = e.toitem.value;
						value = _value.province + _value.city + _value.district + _value.street + _value
							.business;
					}
					str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
					G("searchResultPanel1").innerHTML = str;
				});

				ac1.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
					var _value = e.item.value;
					myValue1 = _value.province + _value.city + _value.district + _value.street + _value
						.business;
					G("searchResultPanel1").innerHTML = "onconfirm<br />index = " + e.item.index +
						"<br />myValue = " + myValue1;
					input1.value = myValue1; //将后台数据的值同步到输入框
					ac = ''
					ac1 = ''
					searchByStationName("input1")
					setPlace(myValue1);
				});
			}
			var localSearch = new BMapGL.LocalSearch(map);

			function searchByStationName(e) {
				var keyword = document.getElementById(e).value;
				localSearch.setSearchCompleteCallback(function(searchResult) {
					var poi = searchResult.getPoi(0);
					if (poi) {
						if (e == 'input') {
							poiWeidu = {
								lng: poi.point.lng,
								lat: poi.point.lat
							}
						} else {
							poiWeidu1 = {
								lng: poi.point.lng,
								lat: poi.point.lat
							}

						}
						if (poiWeidu1 && poiWeidu) {
							geoloca.getCurrentPosition(function(r) {
								if (this.getStatus() == BMAP_STATUS_SUCCESS) {
									var mk = new BMapGL.Marker(r.point);
									map.addOverlay(mk);
									map.panTo(r.point);
									var start = new BMapGL.Point(poiWeidu.lng, poiWeidu.lat);
									var end = new BMapGL.Point(poiWeidu1.lng, poiWeidu1.lat);
									// var end = new BMapGL.Point(106.459525,29.567353);
									transit.search(start, end);
								} else {}
							});
						}


					}
					map.centerAndZoom(poi.point, 15);
				});
				localSearch.search(keyword);
			}

			function setPlace(e) {
				map.clearOverlays(); //清除地图上所有覆盖物
				function myFun() {
					var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
					map.centerAndZoom(pp, 30);
					map.addOverlay(new BMapGL.Marker(pp)); //添加标注
				}
				var local = new BMapGL.LocalSearch(map, { //智能搜索
					onSearchComplete: myFun
				});
				local.search(e);
			}

	



			let geolocation = new BMapGL.Geolocation();
			geolocation.getCurrentPosition(function(r) {
				if (this.getStatus() == BMAP_STATUS_SUCCESS) {
					var mk = new BMapGL.Marker(r.point);
					map.addOverlay(mk);
					map.panTo(r.point);
				} else {}
			});


			var btn = document.getElementById("btn");
			btn.addEventListener('click', function() {
				uni.postMessage({
					data: {
						loadAdd: input.value,
						unloadAdd: input1.value,
						loadLngLat: poiWeidu.lng + ',' + poiWeidu.lat,
						unloadLngLat: poiWeidu1.lng + ',' + poiWeidu1.lat,
					}
				});
			}, false)

		});
	</script>
</html>